<template>
  <div class="container">
    <div class="mainContent">
      <video
        id="v1"
        ref="v1"
        width="100%"
        height="100%"
        crossorigin="anonymous"
        autoplay="autoplay"
      ></video>
    </div>
    <div class="floatContent">
      <div
        style="
          display: flex;
          height: 40px;
          justify-content: center;
          background-color: #494746;
          color: white;
        "
      >
        <input
          type="text"
          style="width: 50%"
          v-model="domain"
          @change="changeDomain()"
          placeholder="请输入店铺域名"
        />
        <select
          v-model="trackId"
          style="width: 50%; height: 40px; margin-left: 2px"
          placeholder="请选择箭道"
          @change="changeTrack"
        >
          <option v-for="track in tracks" :key="track.id" :value="track.id">
            {{ track.name }}
          </option>
        </select>
      </div>
      <div v-if="status" style="display: flex; flex: 3; flex-direction: column">
        <div
          v-if="status"
          style="
            display: flex;
            height: 40px;
            align-items: center;
            justify-content: center;
          "
        ></div>
        <div
          v-if="status"
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #494746;
            color: white;
            font-size: 2.5rem;
            height: 40px;
          "
        >
          消费时长
        </div>
        <div
          v-if="status"
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #494746;
            color: white;
            font-size: 5rem;
            flex: 10;
          "
        >
          {{ getTime() }}
        </div>
      </div>
      <div v-if="status" style="display: flex; flex: 3; flex-direction: column">
        <div
          v-if="status"
          style="
            display: flex;
            height: 30px;
            align-items: center;
            justify-content: center;
          "
        ></div>
        <div
          v-if="status"
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #494746;
            color: white;
            font-size: 2.5rem;
            height: 40px;
          "
        >
          完成组数
        </div>
        <div
          v-if="status"
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #494746;
            flex: 10;
            color: white;
            font-size: 8rem;
            font-weight: 2000;
          "
        >
          {{ consumerCount }}
        </div>
      </div>
      <div
        v-if="!status"
        style="
          display: flex;
          flex: 6;
          align-items: center;
          justify-content: center;
          font-size: 7rem;
          font-weight: 2000;
        "
      ></div>
      <div style="display: flex; margin-top: 5px">
        <video
          id="v2"
          ref="v2"
          width="100%"
          crossorigin="anonymous"
          autoplay="autoplay"
        ></video>
      </div>
    </div>
  </div>
</template>

<script>
import {
  listAllTrack,
  getCaremaList,
  getTrackStatus,
  getConsumeTimes,
  getConsumeCount,
  uploadImg,
} from "../js/video.js";
import localStorage from "localStorage";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      domain: null,
      consumerCount: 0,
      status: false,
      tracks: [],
      times: 2000,
      c1Server: null,
      c2Server: null,
      trackId: null,
    };
  },
  mounted() {},
  beforeDestroy() {
    try {
      this.c1Server.disconnect();
    } catch (e) {
      console.log(e);
    }
    try {
      this.c2Server.disconnect();
    } catch (e) {
      console.log(e);
    }
  },
  created() {
    this.domain = localStorage.getItem("domain1");
    if (this.domain == null || this.domain == "") {
      return;
    }
    listAllTrack()
      .then((response) => {
        console.log(response);
        this.tracks = response.data;
        console.log(this.tracks);
      })
      .catch((error) => {
        console.log(error);
      });
    let trackId = localStorage.getItem("trackId");
    if (trackId != null && trackId > 0) {
      this.trackId = trackId;
    }
    this.getCarema();
    setInterval(() => {
      if (this.domain != null && this.domain != "") {
        this.getTrackStatuss();
      }
    }, 3000);
    setInterval(() => {
      this.times++;
    }, 1000);
    setInterval(() => {
      if (this.status) {
        this.gettTimes();
        this.consumeCount();
      }
    }, 5000);

    setInterval(() => {
      if (this.status) {
        this.uploadCurrentImage();
      }
    }, 1000 * 14);
  },
  methods: {
    changeDomain() {
      console.log(this.domain)
      localStorage.setItem("domain1", this.domain);
      window.location.reload();
    },
    async uploadCurrentImage() {
      let c1 = document.createElement("canvas");
      let c2 = document.createElement("canvas");
      const b1 = await this.gettCurrentImage(this.$refs.v1, c1, 1);
      const b2 = await this.gettCurrentImage(this.$refs.v2, c2, 2);
      b1.crossOrigin = "anonymous";
      b2.crossOrigin = "anonymous";
      const formData = new FormData();
      formData.append("img1", b1, "img1.png");
      formData.append("img2", b2, "img2.png");
      formData.append("trackId", this.trackId);
      uploadImg(formData).then((response) => {
        //this.consumerCount = response.data;
      });
    },
    async gettCurrentImage(videoElement, canvasElement, type) {
      const canvasContext = canvasElement.getContext("2d");
      console.log(
        videoElement.width,
        videoElement.height,
        canvasContext.width,
        canvasContext.height
      );
      if (type == 1) {
        canvasElement.width = 640;
        canvasElement.height = 360;
      } else {
        canvasElement.width = 300;
        canvasElement.height = 300;
      }
      canvasContext.drawImage(
        videoElement,
        0,
        0,
        canvasElement.width,
        canvasElement.height
      );
      const currentFrame = canvasElement.toDataURL("image/png");
      const blob = await fetch(currentFrame).then((res) => res.blob());
      return blob;
    },
    consumeCount() {
      let trackId = localStorage.getItem("trackId");
      getConsumeCount(trackId).then((response) => {
        this.consumerCount = response.data;
      });
    },
    gettTimes() {
      let trackId = localStorage.getItem("trackId");
      getConsumeTimes(trackId).then((response) => {
        this.times = response.data;
      });
    },
    getTrackStatuss() {
      let trackId = localStorage.getItem("trackId");
      if (trackId == null || trackId < 1) {
        return;
      }
      getTrackStatus(trackId)
        .then((response) => {
          this.status = response.data;
          if (this.status) {
            this.gettTimes();
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getCarema() {
      let trackId = localStorage.getItem("trackId");
      if (trackId == null || trackId < 1) {
        return;
      }
      getCaremaList(trackId).then((response) => {
        if (response.data == null || response.data == "") {
          return;
        }
        let data = response.data;
        let c1 = data.arrowCarema;
        let c2 = data.quiverCarema;
        if (c1 == null || c1 == "" || c2 == null || c2 == "") {
          return;
        }
        this.c1Server = new WebRtcStreamer("v1", c1.streamUrl);
        this.c2Server = new WebRtcStreamer("v2", c2.streamUrl);
        let c1Stream =
          "rtsp://" +
          c1.username +
          ":" +
          c1.password +
          "@" +
          c1.caremaUrl +
          ":554/Streaming/Channels/101";
        let c2Stream =
          "rtsp://" +
          c2.username +
          ":" +
          c2.password +
          "@" +
          c2.caremaUrl +
          ":554/Streaming/Channels/101";
        console.log(c1Stream, c2Stream);
        this.c1Server.connect(c1Stream);
        this.c2Server.connect(c2Stream);
      });
    },
    changeTrack(event) {
      localStorage.setItem("trackId", event.target.value);
      window.location.reload();
    },
    getTime() {
      let hour = parseInt(parseInt(this.times / 60) / 60);
      let minute = parseInt(this.times / 60) % 60;
      let second = this.times % 60;
      return hour + ":" + minute + ":" + second;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body {
  padding: 0;
  margin: 0;
}
h3 {
  margin: 0 0 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.container {
  position: relative;
  overflow-x: hidden;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  max-width: 100%;
}
.mainContent {
  width: 100%;
  height: 100%;
}
.floatContent {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 0;
  right: 0;
  z-index: 2;
  width: 20%;
  height: 100%;
}
</style>
